<template>
	<view class="list">
		<swiper :vertical="true" @change="change">
			<swiper-item v-for="(item,index) of list" :key="index">
				<!-- 视频播放 -->
				<video-player @dblclick="dblclick" ref="player" :video="item" :index="index" />
				<!-- 左边图标 -->
				<video-left :item="item" />
				<!-- 右边文字 -->
				<video-right :item="item" ref="right" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				dblclick_number: 0,
			};
		},
		methods: {
			change(e) {
				if (e.detail.current - 1 >= 0) {
					this.$refs.player[e.detail.current - 1].pause();
				};
				this.$refs.player[e.detail.current].player();
				this.$refs.player[e.detail.current + 1].pause();
				// 判断双击了那个视频
				this.dblclick_number = e.detail.current;
			},
			// 双击屏幕事件
			dblclick() {
				this.$refs.right[this.dblclick_number].dblclick();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		height: 100%;

		swiper {
			width: 100%;
			height: 100%;

			>swiper-item {
				width: 100%;
				height: 100%;
				z-index: 19;
			}
		}
	}
</style>
